<template>
    <div class='tmp' style='padding-bottom:50px; background:white'>
        <div>
            <textarea style='height: 60px; border: 1px solid #000000' name='content' ref='textarea'>

            </textarea>
            <button type="button" @click='SubmitComment'>发表评论</button>
        </div>
        <div class='comment_list'>
            <ul>
                <li v-for='item in textlist'>
                    <p style='font-size: 12px'>用户名:{{item.user_name}} &nbsp; 评论时间:{{item.add_time | moments}}</p>
                    <p style='border: 1px solid #e3e3e3'>{{item.content}}</p>
                </li>
            </ul>
            <button type='button' @click='getpage'>加载更多</button>
        </div>
    </div>
</template>
<script>
    import common from '../field/getfield.js';
    import { Toast } from 'mint-ui';
    export default{
        props:['artid'],
        data(){
            return {
                textlist:[],
                pagenumber:1
            }
        },
        methods:{
            getid(){
                console.log(this.artid+"id")
            },
            getcomment(){
                var url = common.apidomain+'/api/getcomments/'+this.artid+'?pageindex='+this.pagenumber;
                this.$http.get(url)
                    .then(res=>{
                        if(res.body.message.length!=0){
                            this.textlist=this.textlist.concat(res.body.message)
                        }else {
                    if(this.pagenumber>1){Toast('没有更多的评论了')};
                        }
                        console.log(res.body.message)
                })
            },
            getpage(){
                this.pagenumber++;
                this.getcomment();
                console.log(this.pagenumber);
            },
            SubmitComment(){
                var textvalue = this.$refs.textarea.value;
                var url = common.apidomain+'/api/postcomment/'+this.artid;
                if(textvalue.length==0){
                    Toast('请填写内容');
                }else{
                    this.$http.post(url,{content:textvalue},{emulateJSON:true})
                        .then(res=>{
                            if(!res.body.status)Toast('发表成功');
                            this.pagenumber=1;
                            this.$refs.textarea.value=''
                            this.textlist=[];
                            this.getcomment();
                    })
                }
            },
        },
        created(){
            this.getid();
            this.getcomment();
        }
    }
</script>
<style scoped>
    .comment_list ul li {
        list-style: none;
    }
</style>